import styled from 'styled-components'

export const BannerWrapper = styled.div`
	/* background-image: url('http://p1.music.126.net/7CR0JVl6iDKaOR_cCfTbaw==/109951168841218856.jpg?imageView&blur=40x20');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 6000px; */

	.banner {
		margin-top: 1px;
		height: 270px;
		position: relative;
		min-width: 1100px;

		.bannerContent {
			height: 270px;
			margin-left: 490px;
			img {
				height: 270px;
			}
		}

		.download {
			height: 270px;
			position: absolute;
			top: 0;
			left: 1220px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			img {
				height: 270px;
			}
		}

		.bannerBtn {
			cursor: pointer;
			width: 30px;
			height: 50px;
			background-color: rgba(0, 0, 0, 0.2);
			position: absolute;
			top: 50%;
			transform: translate(0, -50%);
			border: none;
			color: white;

			&:hover {
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.leftbtn {
			left: 450px;
		}

		.rightbtn {
			left: 1424px;
		}

		.bannerPoint {
			border-radius: 50%;
			text-align: center;
		}

		.bannerDotsUl {
			list-style: circle;
			display: inline-block;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 45%;
			transform: translate(-50%, 0);
		}

		.bannerDotsItem {
			list-style: disc;
			cursor: pointer;
			color: #aaa;
			margin: 0 10px;
			width: 10px;
			height: 10px;

			&:hover {
				color: red;
			}
		}

		.dotsActive {
			color: red;
		}
	}
`
